import React from "react";
import axios from "axios";
import "./app.less";
// 弹窗宽度
const MODAL_WIDTH = 350;

function getReqUrl(theme) {
  return `https://www.zhihu.com/api/v4/columns/${theme}/items`;
}

function injectXHR(url, callback) {
  let XMLHttpRequest = window.XMLHttpRequest;
  const oldOpen = XMLHttpRequest.prototype.open;

  XMLHttpRequest.prototype.open = function (method, url, async) {
    if (!url.match(/sockjs/)) {
      this.logData = { method, url, async };
    }
    return oldOpen.apply(this, arguments);
  };

  const oldSend = XMLHttpRequest.prototype.send;
  XMLHttpRequest.prototype.send = function (body) {
    if (this.logData) {
      // 在发送之前记录一下开始时间
      let startTime = Date.now();
      const handler = (type) => (event) => {
        if (this.logData.url.includes("/columns/itech/items")) {
          debugger;

          callback(this.response);
        }
      };

      this.addEventListener("load", handler("load"), false);
      this.addEventListener("error", handler("error"), false);
      this.addEventListener("abort", handler("abort"), false);
    }
    return oldSend.apply(this, arguments);
  };
}

injectFetch();
function injectFetch() {
  const originFetch = window.fetch;
  Object.defineProperty(window, "fetch", {
    configurable: true,
    enumerable: true,
    get() {
      return (url, options) => {
        console.log("劫持fetch", url);
        return originFetch(url, options).then((res) => {
          console.log("劫持fetch", res);

          return res;
        });
      };
    },
  });
}

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: false, data: [], url: "", offset: 0 };
  }

  componentDidMount() {
    console.log("url", window.location.href);
    const theme = window.location.href.split("/").pop();
    if (theme) {
      const reqUrl = getReqUrl(theme);
      axios
        .get(reqUrl)
        .then((res) => res.data)
        .then((res) => {
          console.log("文章列表", res);
          this.setState({
            data: res.data,
            show: true,
            url: reqUrl,
            offset: 10,
          });
        });
    }
  }

  loadMore = () => {
    const { data, url, offset } = this.state;
    axios
      .get(`${url}??limit=10&offset=${offset}`)
      .then((res) => res.data)
      .then((res) => {
        this.setState({
          data: [...data, ...res.data],
          show: true,
          offset: offset + 10,
        });
      });
  };

  render() {
    let { show, data } = this.state;
    console.log("xxxxxxxxxxxxxxxxxxxxxxx");
    return (
      <>
        {show && (
          <ul className="menu-list">
            {data.map((item, i) => (
              <li key={i} className="item">
                <a href={item.url} target="_blank">
                  {item.title}
                </a>
              </li>
            ))}
            <li className="load-more" onClick={this.loadMore}>
              加载更多
            </li>
          </ul>
        )}
      </>
    );
  }
}
